<template>
	<div class="home">
		<p class="home-tit">你好! {{ userInfo.username }}</p>

		<van-swipe :autoplay="3000" indicator-color="white" class="van-swipe">
			<van-swipe-item class="swipe-item" v-for="(item, index) in imglist" :key="index">
				<img :src="item.src" />
			</van-swipe-item>
		</van-swipe>

		<div class="nav clearfix">
			<div v-for="(item,index) in table" :key="index" class="con-item">
				<router-link :to="item.path" class="router">
					<img :src="item.img" alt />
					<span>{{item.title}}</span>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'
import { mapGetters } from 'vuex'
import api from '../../api/api'

export default {
	name: 'home',

	components: {
		[Swipe.name]: Swipe,
		[SwipeItem.name]: SwipeItem,
	},
	data() {
		return {
			roleid: '',
			imglist: [
				{ src: require('@/assets/home_bg1.jpg') },
				{ src: require('@/assets/home_bg2.jpg') },
				{ src: require('@/assets/home_bg3.jpg') },
				{ src: require('@/assets/home_bg4.jpg') },
			],
			table: [
				{
					path: '/readtype/' + this.$route.query.roleid,
					img: require('@/assets/home-icon1.png'),
					title: '阅读训练',
				},
				{
					path: '/listentype/' + this.$route.query.roleid,
					img: require('@/assets/home-icon2.png'),
					title: '听力理解',
				},
				{
					path: '/langugetype/' + this.$route.query.roleid,
					img: require('@/assets/home-icon3.png'),
					title: '口语训练',
				},
				{
					path: '/writtype/' + this.$route.query.roleid,
					img: require('@/assets/home-icon4.png'),
					title: '写作训练',
				},
				{
					path: '/translatetype/' + this.$route.query.roleid,
					img: require('@/assets/home-icon5.png'),
					title: '翻译训练',
				},
				{
					path: '/clozetype/' + this.$route.query.roleid,
					img: require('@/assets/home-icon6.png'),
					title: '完形填空',
				},
				{
					path: '/vocabularytype/' + this.$route.query.roleid,
					img: require('@/assets/home-icon7.png'),
					title: '词汇训练',
				},
				{
					path: '/grammartype/' + this.$route.query.roleid,
					img: require('@/assets/home-icon10.png'),
					title: '语法训练',
				},
				// { path: '/develop', img: require('@/assets/home-icon11.png'), title: '水平测试' },
				// { path: '/develop', img: require('@/assets/home-icon8.png'), title: '模拟训练' },
				// { path: '/develop', img: require('@/assets/home-icon9.png'), title: '真题训练' },
				// { path: '/develop', img: require('@/assets/home-icon12.png'), title: '词汇学习' },
			],
		}
	},
	created() {
		this.roleid = this.$route.query.roleid //用户登录的角色id
		console.log(this.$route)
		// this.schoolLists()
	},
	computed: {
		...mapGetters(['userInfo']),
	},
	methods: {
		schoolLists() {
			api
				.schoollist()
				.then((res) => {
					console.log('one', res)
				})
				.catch((error) => {
					console.log(error)
				})
		},
	},
	mounted() {},
}
</script>

<style lang="less" scoped>
.home-tit {
	font-size: 14px;
	color: #333;
	line-height: 34px;
	padding-left: 20px;
	letter-spacing: 2px;
}
.van-swipe {
	margin: 0 auto;
	width: 335px;
	height: 150px;
	border-radius: 10px;
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
}
.van-swipe img {
	display: block;
	width: 100%;
	height: 100%;
}
.nav {
	width: 90%;
	margin: 0 auto;
	margin-top: 30px;
	.con-item {
		width: 30%;
		margin-right: 5%;
		margin-bottom: 8%;
		float: left;
		.router {
			display: block;
			img {
				display: block;
				width: 48px;
				height: 48px;
				margin: 0 auto;
			}
			span {
				display: block;
				text-align: center;
				margin-top: 10px;
				font-size: 14px;
				color: #333;
			}
		}
	}
	.con-item:nth-child(3n + 3) {
		margin-right: 0;
	}
}
</style>
